<div class="am-cf am-padding-xs am-padding-bottom-0">
	<div class="am-fl am-cf">
		<strong class="am-text-primary am-text-lg">redis管理工具</strong> / <small>hash</small>
	</div>
	<div class="am-fr am-cf">
		<button type="button" class="am-btn am-btn-xs am-btn-primary" data-am-modal="{target: '#editModal'}">
			<i class="am-icon-plus"></i>&nbsp;新增
		</button>
	</div>
</div>
<hr class="am-margin-xs"/>
<form class="am-form am-form-horizontal am-margin-right-sm" role="form" id="queryForm">
	<ul class="am-avg-sm-1 am-avg-md-2 am-avg-lg-3 am-thumbnails">
		<li class="am-padding-0">
			<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
				<label for="name" class="am-u-sm-4 am-form-label am-text-right am-padding-left-0 am-padding-right-0">key：</label>
				<div class="am-u-sm-8 am-padding-left-0 am-padding-right-0">
					<input type="text" class="am-form-field redisKey" />
				</div>
			</div>
		</li>
		<li class="am-padding-0">
			<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
				<label for="name" class="am-u-sm-4 am-form-label am-text-right am-padding-left-0 am-padding-right-0">hashKey：</label>
				<div class="am-u-sm-8 am-padding-left-0 am-padding-right-0">
					<input type="text" class="am-form-field redisHashKey" />
				</div>
			</div>
		</li>
		<li class="am-padding-0">
			<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
				<div class="am-u-sm-12 am-padding-left-xs am-padding-right-0">
					<button type="button" id="queryBtn" class="am-btn am-btn-sm am-btn-primary"><i class="am-icon-search"></i>&nbsp;查询</button>
					<button type="button" id="deleteBtn" class="am-btn am-btn-sm am-btn-primary"><i class="am-icon-search"></i>&nbsp;删除</button>
					<button type="reset" class="am-btn am-btn-sm am-btn-default"><i class="am-icon-undo"></i>&nbsp;重置</button>
				</div>
			</div>
		</li>
	</ul>
</form>
<hr class="am-margin-top-0"/>
<div class="am-g am-padding-left-sm">
	<div class="am-sm-12" id="queryResult"></div>
</div>
<hr class="am-margin-xs"/>
<div class="am-scrollable-horizontal">
	<table class="am-table am-table-bordered am-table-striped am-table-hover am-table-compact am-table-centered am-margin-bottom-xs">
		<thead>
			<tr class="am-text-nowrap">
				<th>序号</th>
				<th>hashKey</th>
				<th>操作</th>
			</tr>
			<tr class="am-hide" id="tableTmpl">
				<td class="am-text-nowrap">{{index}}</td>
				<td class="am-text-nowrap">{{hashKey}}</td>
				<td>
					<div class="am-btn-toolbar">
						<div class="am-btn-group am-btn-group-xs">
							<button type="button" class="am-btn am-btn-primary queryValueBtn" data-key="{{key}}" data-hashkey="{{hashKey}}"><i class="am-icon-search"></i>&nbsp;查询</button>
						</div>
					</div>
				</td>
			</tr>
		</thead>
		<tbody id="tableBody"></tbody>
	</table>
</div>
<div class="am-modal am-modal-no-btn" tabindex="-1" id="editModal">
	<div class="am-modal-dialog">
		<div class="am-modal-hd">新增
			<a href="javascript:void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
		</div>
		<div class="am-modal-bd">
			<hr/>
			<form class="am-form am-form-horizontal am-margin-right-sm" role="form" id="addForm">
				<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
					<label for="name" class="am-u-sm-4 am-form-label am-text-right am-padding-left-0 am-padding-right-0">key：</label>
					<div class="am-u-sm-6 am-padding-left-0 am-padding-right-0 am-u-end">
						<input type="text" class="am-form-field" name="key" />
					</div>
				</div>
				<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
					<label for="name" class="am-u-sm-4 am-form-label am-text-right am-padding-left-0 am-padding-right-0">hashKey：</label>
					<div class="am-u-sm-6 am-padding-left-0 am-padding-right-0 am-u-end">
						<input type="text" class="am-form-field" name="hashKey" />
					</div>
				</div>
				<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
					<label for="name" class="am-u-sm-4 am-form-label am-text-right am-padding-left-0 am-padding-right-0">value：</label>
					<div class="am-u-sm-6 am-padding-left-0 am-padding-right-0 am-u-end">
						<input type="text" class="am-form-field" name="value" />
					</div>
				</div>
				<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
					<label for="name" class="am-u-sm-4 am-form-label am-text-right am-padding-left-0 am-padding-right-0">有效时间（秒）：</label>
					<div class="am-u-sm-6 am-padding-left-0 am-padding-right-0 am-u-end">
						<input type="number" class="am-form-field" name="timeout" />
					</div>
				</div>
				<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
					<div class="am-u-sm-offset-4 am-u-sm-6 am-padding-left-0 am-padding-right-0 am-u-end">
						<button type="button" class="am-btn am-btn-sm am-btn-primary" id="addBtn">
							<i class="am-icon-save"></i>&nbsp;确定
						</button>
						<button type="button" class="am-btn am-btn-sm am-btn-default" data-am-modal-close>
							<i class="am-icon-undo"></i>&nbsp;返回
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
<script>
(function(){
	$('#tableBody').on('click', '.queryValueBtn', function(){
		var key = $(this).data('key');
		var hashKey = $(this).data('hashkey');
		var td = $(this).parent();
		$.ajax({
			url: basePath + 'redis/hash',
			type: 'get',
			dataType: 'json',
			data: {
				key: key,
				hashKey: hashKey
			},
			success: function(data){
				td.html('查询结果：过期时间：[' + data.expire + ']秒; 数据类型：[' + data.dataType + ']; 数据：[' + (decode(data.content) || '') + ']');
			}
		});
	});
	
	function decode(s) {
	    return unescape(s.replace(/\\(u[0-9a-fA-F]{4})/gm, '%$1'));
	}
	
	$('#addBtn').on('click', function(){
		var key = $('#addForm input[name="key"]').val();
		if(!key){
			$('#addForm input[name="key"]').focus();
			return false;
		}
		var value = $('#addForm input[name="value"]').val();
		if(!value){
			$('#addForm input[name="value"]').focus();
			return false;
		}
		var timeout = $('#addForm input[name="timeout"]').val();
		if(!timeout){
			$('#addForm input[name="timeout"]').focus();
			return false;
		}
		$('#addForm').ajaxSubmit({
			url: basePath + 'redis/save',
			type: 'post',
			dataType: 'json',
			success: function(data){
				$('#editModal').modal('close');
				layer.msg('保存成功');
				$('#queryResult').text('');
			}
		});
	});
	
	$('#queryBtn').on('click', function(){
		var redisKey = $('#queryForm .redisKey').val();
		if(!redisKey){
			$('#queryForm .redisKey').focus();
			return false;
		}
		var redisHashKey = $('#queryForm .redisHashKey').val();
// 		if(!redisHashKey){
// 			$('#queryForm .redisHashKey').focus();
// 			return false;
// 		}
		$.ajax({
			url: basePath + 'redis/hash',
			type: 'get',
			dataType: 'json',
			data: {
				key: redisKey,
				hashKey: redisHashKey
			},
			success: function(data){
				$('#queryResult').html('key：[' + redisKey + ']<br/>查询结果：过期时间：[' + data.expire + ']秒; 数据类型：[' + data.dataType + ']; 数据：[' + (data.content || '') + ']; ');
				
				if(!data.hashKeys){
					layer.msg("没有对应的hashKey");
					return null;
				}
				$('#tableBody').empty();
				for(var i=0; i<data.hashKeys.length; i++){
					var html = $.format($('#tableTmpl').html(), {key: redisKey, hashKey: data.hashKeys[i], index: i + 1});
					$('#tableBody').append('<tr>' + html + '</tr>');
				}
			}
		});
	});
	
	$('#addBtn').on('click', function(){
		var key = $('#addForm input[name="key"]').val();
		if(!key){
			$('#addForm input[name="key"]').focus();
			return false;
		}
		var hashKey = $('#addForm input[name="hashKey"]').val();
// 		if(!hashKey){
// 			$('#addForm input[name="hashKey"]').focus();
// 			return false;
// 		}
		var value = $('#addForm input[name="value"]').val();
		if(!value){
			$('#addForm input[name="value"]').focus();
			return false;
		}
		var timeout = $('#addForm input[name="timeout"]').val();
		if(!timeout){
			$('#addForm input[name="timeout"]').focus();
			return false;
		}
		$('#addForm').ajaxSubmit({
			url: basePath + 'redis/save',
			type: 'post',
			dataType: 'json',
			success: function(data){
				$('#editModal').modal('close');
				layer.msg('保存成功');
				$('#queryResult').text('');
			}
		});
	});
	
	$('#deleteBtn').on('click', function(){
		var redisKey = $('#queryForm .redisKey').val();
		if(!redisKey){
			$('#queryForm .redisKey').focus();
			return false;
		}
		$.ajax({
			url: basePath + 'redis/keys/' + redisKey,
			type: 'delete',
			dataType: 'json',
			success: function(data){
				$('#queryResult').text('删除结果：操作成功');
			}
		});
	});
})();
</script>
</body>
</html>
